<template>
    <div class="head-img">
        <div class="touxiang" v-if="loginStu">
            <div class="img-box">
                <img :src="user.avatarUrl" alt="" />
            </div>
            <div class="user-name">
                <p>{{ user.nickname }}</p>
            </div>
        </div>
        <div class="login-box" v-else>
            <el-button type="success" @click="jumpLogin()">登录</el-button>
            <el-button type="success" @click="jumpRegister()">注册</el-button>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers("login");
export default {
    components: {},
    mounted() {
        this.getLoginStu();
        this.getUserDetail();
    },
    data() {
        return {};
    },
    computed: {
        ...mapState(["loginStu", "user"]),
    },
    methods: {
        ...mapActions(["getUserDetail"]),
        ...mapMutations(["getLoginStu"]),
        jumpLogin() {
            this.$router.push("/login");
        },
        jumpRegister() {
            this.$router.push("/register");
        },
    },
};
</script>

<style lang='scss' scoped>
.head-img {
    width: 181px;
    .touxiang {
        display: flex;
        height: 100px;
        align-items: center;

        .img-box {
            width: 40px;
            height: 40px;
            line-height: 40px;
            margin-right: 13px;
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
        .user-name {
            color: gray;
        }
    }
}
</style>